<!-- /*!
 * @ngx-dummy/Accordion-Simple library
 * Simple accordion created for angular / ionic projects.
 * https://github.com/ngx-dummy/accordion-simple
 *
 * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>
 * Published under GNU LGPLv3 License
 */ --><!DOCTYPE html><html lang="en"><head>
		<meta charset="utf-8">
		<title>AccordionSample</title>
		<base href="/accordion-simple/">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="icon" type="image/x-icon" href="favicon.ico">
		<link rel="manifest" href="manifest.json">
		<link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png">
		<link rel="apple-touch-icon" sizes="60x60" href="apple-icon-60x60.png">
		<link rel="apple-touch-icon" sizes="72x72" href="apple-icon-72x72.png">
		<link rel="apple-touch-icon" sizes="76x76" href="apple-icon-76x76.png">
		<link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114x114.png">
		<link rel="apple-touch-icon" sizes="120x120" href="apple-icon-120x120.png">
		<link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.png">
		<link rel="apple-touch-icon" sizes="152x152" href="apple-icon-152x152.png">
		<link rel="apple-touch-icon" sizes="180x180" href="apple-icon-180x180.png">
		<link rel="icon" type="image/png" sizes="192x192" href="android-icon-192x192.png">
		<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
		<link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
		<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
		<meta name="msapplication-TileImage" content="ms-icon-144x144.png">
		<meta name="msapplication-TileColor" content="#fff">
		<meta name="theme-color" content="#fff">
		<meta name="description" content="Sample app exposing Ngx-dummy/accordion-simple lib usage">
		<meta name="keywords" content="accordion,accordion-component,accordion component,accordion-simple,simple accordion,Angular,Ionic,typescript,javascript">
		<meta name="author" content="Vladimir Ovsyukov">

		<meta name="image" content="https://raw.githubusercontent.com/ngx-dummy/accordion-simple/master/docs/ngx-dummy-logo.png">
		<meta itemprop="name" content="Accordion-Simple library">
		<meta itemprop="image" content="https://raw.githubusercontent.com/ngx-dummy/accordion-simple/master/docs/ngx-dummy-logo.png">
		<meta name="twitter:card" content="summary">
		<meta name="twitter:title" content="Accordion-Simple library">
		<meta name="twitter:site" content="@OvsyukovV">
		<meta name="twitter:creator" content="@OvsyukovV">
		<meta name="twitter:image:src" content="https://raw.githubusercontent.com/ngx-dummy/accordion-simple/master/docs/ngx-dummy-logo.png">
		<meta name="og:title" content="Accordion-Simple library">
		<meta name="og:image" content="https://raw.githubusercontent.com/ngx-dummy/accordion-simple/master/docs/ngx-dummy-logo.png">
		<meta name="og:url" content="https://accordion-simple-tester.netlify.app">
		<meta name="og:site_name" content="Accordion-Simple library">
		<meta name="og:type" content="website">
		<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
		<style>
			@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
			@import url('https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css');
			@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,900&display=swap');
			@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,300&display=swap');
		</style>
	<style>:root{--light-bg:#fafafa;--medium-bg:#f4f4f4;--dark-bg:#e2e1e1;--light-blue-color:#4d4dfa;--yellow-color:#dcdf36;--darker-color:#607386;--item-color:#adbdce;--accent-color:#42b883;--warn-color:#f85a40;--light-warn-color:#f07764;--dark-blue-color:#52529b;--mdc-typography-font-family:"Lato", sans-serif;--mdc-theme-on-primary:var(--warn-color);--mdc-theme-secondary:var(--light-warn-color)}body{box-sizing:border-box;height:100%;margin:0;padding:0;overflow:hidden;background:#e2e1e1;background:var(--dark-bg);color:#607386;color:var(--darker-color);font-family:Lato,sans-serif;font-family:var(--mdc-typography-font-family);font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400}*:focus{outline:none}.mdc-drawer-app-content{position:relative;flex:auto;overflow:auto}.main-content{height:100%;margin:.2rem;overflow:auto}.app-bar{position:absolute;top:0;transition:1s ease-in;background:linear-gradient(#52529b,#607386);background:linear-gradient(var(--dark-blue-color),var(--darker-color));background-color:#f07764;background-color:var(--light-warn-color)}.swiper-slide:not(.swiper-slide-visible.swiper-slide-active){opacity:0}.mdc-top-app-bar{z-index:7}.mdc-top-app-bar__title{cursor:pointer}.menu-grid--col4{display:grid;grid-gap:1rem;grid-template-columns:4fr 1fr 1fr}.menu-grid--col4 .mdc-image-menu__image{max-height:4rem;margin:0 1rem 0 -1rem}.mdc-drawer__header{box-sizing:border-box;background-color:#f4f4f4;background-color:var(--medium-bg)}.mdc-drawer__footer{box-sizing:border-box;flex-shrink:0;align-items:center;justify-content:space-evenly;min-height:64px;padding:0 16px 4px;background-color:#e2e1e1;background-color:var(--dark-bg)}.screen{box-sizing:border-box;padding:1rem;overflow-y:auto!important}.device-settings{max-width:70vw;max-height:70vh;text-align:center}.container-transparent{width:100%;height:100%;margin:0;padding:0;background:rgba(80,80,80,.2274509804)}.spinner{margin-top:20%;animation:rotator 1.5s linear infinite}.path{transform-origin:center;animation:dash 1.5s ease-in-out infinite,colors 3s ease-in-out infinite;stroke-dasharray:188;stroke-dashoffset:0}.mdc-drawer__content{display:flex;flex-direction:column;height:100%}.mdc-drawer__content .flex-list{display:flex;flex:auto;flex-direction:column;justify-content:space-between}.mdc-drawer__content .flex-list .gh-list{flex:1 1 50%}.mdc-drawer__content .flex-list .nav-list{display:flex;flex:auto;flex-direction:column;justify-content:space-between}.mdc-drawer__content .flex-list .mdc-list-item{color:#f85a40;color:var(--warn-color);list-style:none;text-decoration:none}.footer{position:absolute;bottom:0;width:100%;min-height:.1rem;margin:0;background-color:#c8c8c81a;font-size:xx-small;text-align:center}.menu-icon{color:#f85a40!important;color:var(--warn-color)!important}.ml-1{margin-left:1rem}.mr-1{margin-right:1rem}.h-a{height:auto}@media screen and (max-width: 500px){.ml-1{margin-left:.1rem}.mr-1{margin-right:.1rem}}@keyframes dash{0%{stroke-dashoffset:188}50%{transform:rotate(135deg);stroke-dashoffset:47}to{transform:rotate(450deg);stroke-dashoffset:188}}@keyframes rotator{0%{transform:rotate(0)}to{transform:rotate(270deg)}}.marvel-device{display:inline-block;position:relative;box-sizing:content-box!important}.marvel-device .screen{display:block;position:relative;z-index:3;width:100%;height:100%;overflow:hidden;border-radius:1px;background:white;box-shadow:0 0 0 3px #111}.marvel-device .top-bar,.marvel-device .bottom-bar{display:block;width:100%;height:3px;background:black}.marvel-device.ipad{width:576px;height:768px;padding:90px 25px;border-radius:44px;background:#242324}.marvel-device.ipad:before{content:"";display:block;position:absolute;top:4px;left:4px;width:calc(100% - 8px);height:calc(100% - 8px);border-radius:40px;background:#1e1e1e}.marvel-device.ipad .camera{position:absolute;top:44px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:100%;background:#3c3d3d}.marvel-device.ipad .home{position:absolute;bottom:22px;left:50%;width:50px;height:50px;margin-left:-25px;border-radius:36px;background:#242324}.marvel-device.ipad .home:after{content:"";display:block;position:absolute;top:50%;left:50%;width:15px;height:15px;margin-top:-8px;margin-left:-8px;border:1px solid rgba(255,255,255,.1);border-radius:4px}.marvel-device.ipad.silver{background:#bcbcbc}.marvel-device.ipad.silver:before{background:#fcfcfc}.marvel-device.ipad.silver .home{background:#fcfcfc;box-shadow:inset 0 0 0 1px #bcbcbc}.marvel-device.ipad.silver .home:after{border:1px solid rgba(0,0,0,.2)}.marvel-device.iphone-x{width:375px;height:812px;padding:26px;border-radius:66px;background:#fdfdfd;box-shadow:inset 0 0 11px #000}.marvel-device.iphone-x .overflow{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;border-radius:66px}.marvel-device.iphone-x .shadow{position:absolute;width:90px;height:90px;border-radius:100%;background:radial-gradient(ellipse at center,rgba(0,0,0,.6) 0%,rgba(255,255,255,0) 60%)}.marvel-device.iphone-x .shadow--tl{top:-20px;left:-20px}.marvel-device.iphone-x .shadow--tr{top:-20px;right:-20px}.marvel-device.iphone-x .shadow--bl{bottom:-20px;left:-20px}.marvel-device.iphone-x .shadow--br{right:-20px;bottom:-20px}.marvel-device.iphone-x:before{content:"";position:absolute;z-index:1;top:5px;left:5px;width:calc(100% - 10px);height:calc(100% - 10px);border-radius:61px;background:black}.marvel-device.iphone-x .inner-shadow{position:absolute;z-index:1;top:10px;left:10px;width:calc(100% - 20px);height:calc(100% - 20px);overflow:hidden;border-radius:56px;box-shadow:inset 0 0 15px #ffffffa8}.marvel-device.iphone-x .inner-shadow:before{content:"";position:absolute;z-index:2;top:-8%;left:0;width:100%;height:116%;border-radius:200px/112px;box-shadow:inset 0 0 20px #fff}.marvel-device.iphone-x .screen{border-radius:40px;box-shadow:none}.marvel-device.iphone-x .top-bar,.marvel-device.iphone-x .bottom-bar{position:absolute;left:0;width:100%;height:8px;background:rgba(0,0,0,.1)}.marvel-device.iphone-x .top-bar{top:80px}.marvel-device.iphone-x .bottom-bar{bottom:80px}.marvel-device.iphone-x .volume,.marvel-device.iphone-x .volume:before,.marvel-device.iphone-x .volume:after,.marvel-device.iphone-x .sleep{position:absolute;width:3px;background:#b5b5b5}.marvel-device.iphone-x .volume{top:116px;left:-3px;height:32px}.marvel-device.iphone-x .volume:before{content:"";top:62px;left:0;height:62px}.marvel-device.iphone-x .volume:after{content:"";top:140px;left:0;height:62px}.marvel-device.iphone-x .sleep{top:200px;right:-3px;height:96px}.marvel-device.iphone-x .camera{position:absolute;top:9px;left:154px;width:6px;height:6px;border-radius:100%;background:#0d4d71}.marvel-device.iphone-x .speaker{position:absolute;top:9px;left:50%;width:60px;height:6px;margin-left:-30px;border-radius:6px;background:#171818}.marvel-device.iphone-x .notch{position:absolute;z-index:4;top:26px;left:108px;width:210px;height:30px;border-bottom-right-radius:24px;border-bottom-left-radius:24px;background:black}.marvel-device.iphone-x .notch:before,.marvel-device.iphone-x .notch:after{content:"";position:absolute;top:0;width:8px;height:8px}.marvel-device.iphone-x .notch:after{left:-8px;background:radial-gradient(circle at bottom left,transparent 0,transparent 70%,black 70%,black 100%)}.marvel-device.iphone-x .notch:before{right:-8px;background:radial-gradient(circle at bottom right,transparent 0,transparent 70%,black 70%,black 100%)}</style><link rel="stylesheet" href="styles.7804c853cc451b45.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.7804c853cc451b45.css"></noscript></head>

	<body class="mdc-typography">
		<header class="mdc-top-app-bar app-bar" id="app-bar">
			<div class="mdc-top-app-bar__row">
				<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
					<button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" aria-label="Open navigation menu">menu</button>
					<span class="mdc-top-app-bar__title" onclick="location.href='vovansuper.github.io'">Usage sample</span>
				</section>
				<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
					<a class="mdc-fab mdc-fab--mini" aria-label="Favorite" data-show-count="false" href="https://twitter.com/intent/tweet?ref_src=twsrc%5Etfw&amp;original_referer=https%3A%2F%2Fngx-dummy.github.io%2Faccordion-simple%2F&amp;url=https%3A%2F%2Fgithub.com%2Fvovansuper%2Faccordion-simple&amp;text=ngx-dummy Accordion simple component">
						<div class="mdc-fab__ripple"></div>
						<span class="mdc-fab__icon material-icons">share</span>
						<img src="twitter-icon-logo.png" style="width: 1rem; opacity: 0.8; transform: translate(-0.2rem, 0.4rem)">
					</a>
					<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button ml-1 mr-1" aria-label="Favorite" aria-pressed="false" title="Sponsor" onclick="location.href='//github.com/sponsors/VovanSuper'" data-icon="octicon-heart">
						favorite
					</button>
					<button id="vert_menu_opener" class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Options">more_vert</button>
					<div class="mdc-menu mdc-menu-surface">
						<ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
							<li class="mdc-list-item" role="menuitem">
								<i class="material-icons mdc-list-item__graphic menu-icon" aria-hidden="true">home_work</i>
								<a href="https://vovansuper.github.io/accordion-simple" target="_blank" class="mdc-list-item__text">Sample App</a>
							</li>
							<li id="nav-to-docs" class="mdc-list-item" role="menuitem">
								<!-- <a id="nav-to-docs" class="mdc-list-item__text"> -->
								<i class="material-icons mdc-list-item__graphic menu-icon" aria-hidden="true">description</i>
								<a class="mdc-list-item__text" href="#">Docs</a>
								<!-- </a> -->
							</li>
						</ul>
					</div>
				</section>
			</div>
		</header>

		<!-- <aside class="mdc-drawer mdc-drawer--dismissible mdc-top-app-bar--fixed-adjust "> -->
		<aside class="mdc-drawer mdc-top-app-bar--fixed-adjust mdc-drawer--modal">
			<div class="mdc-drawer__content">
				<div class="mdc-drawer__header">
					<div class="mdc-top-app-bar__row h-a">
						<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start menu-grid--col4">
							<div class="">
								<img class="mdc-image-menu__image" src="ngx-dummy-logo.png">
							</div>
							<div class="mdc-card__action-icons">
								<button class="mdc-icon-button mdc-card__action mdc-card__action--icon--unbounded" aria-pressed="false" aria-label="Sponsor" title="Sponsor" onclick="location.href='//github.com/sponsors/ngx-dummy'" data-icon="octicon-heart">
									<i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">favorite</i>
									<i class="material-icons mdc-icon-button__icon">favorite_border</i>
								</button>
								<button class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon--unbounded" title="Share" data-mdc-ripple-is-unbounded="true" onclick="location.href='//twitter.com/intent/tweet?ref_src=twsrc%5Etfw&amp;original_referer=https%3A%2F%2Fngx-dummy.github.io%2Faccordion-simple%2F&amp;url=https%3A%2F%2Fgithub.com%2Fvovansuper%2Faccordion-simple&amp;text=ngx-dummy'">
									share
								</button>
							</div>
						</section>
					</div>
					<h3 class="mdc-drawer__title">AccordionSimple</h3>
					<h5 class="mdc-drawer__subtitle2">Demonstrator app</h5>
				</div>
				<nav class="mdc-list-group flex-list">
					<div class="mdc-list gh-list">
						<a class="mdc-list-item mdc-list-item--activated" href="https://github.com/VovanSuper/accordion-simple" aria-current="page" tabindex="0">
							<img class="material-icons mdc-list-item__graphic" src="github-logo.svg" alt="Repo" style="max-height: 90%">
							<span class="mdc-list-item__text">Repository Home</span>
						</a>
					</div>
					<!-- <span class="flex-spacer"></span> -->
					<div class="mdc-list nav-list">
						<a class="mdc-list-item mdc-list-item--activated" href="." aria-current="page" tabindex="0">
							<i class="material-icons mdc-list-item__graphic" aria-hidden="true">home</i>
							<span class="mdc-list-item__text">Sample</span>
						</a>
						<a class="mdc-list-item" id="forward">
							<i class="material-icons mdc-list-item__graphic" aria-hidden="true">east</i>
							<span class="mdc-list-item__text">Next Slide</span>
						</a>
						<a class="mdc-list-item" id="back">
							<i class="material-icons mdc-list-item__graphic" aria-hidden="true">west</i>
							<span class="mdc-list-item__text">Previous Slide</span>
						</a>
					</div>
				</nav>
			</div>
			<footer class="mdc-footer mdc-drawer__footer">
				<a class="github-button" href="https://github.com/ngx-dummy/accordion-simple/fork" data-icon="octicon-repo-forked" aria-label="ngx-dummy/accordion-simple on GitHub">
					Fork
				</a>
				<a class="github-button" href="https://github.com/VovanSuper" aria-label="Follow @VovanSuper on GitHub">Follow @VovanSuper</a>
				<a class="github-button" href="https://github.com/VovanSuper/accrdion-simple" data-icon="octicon-star" aria-label="Star VovanSuper/accordion-simple on GitHub"> Star </a>
				<a class="github-button" href="https://github.com/sponsors/VovanSuper" data-icon="octicon-heart" aria-label="Sponsor VovanSuper on GitHub"> Sponsor </a>
				<a class="github-button" href="https://github.com/sponsors/ngx-dummy" data-icon="octicon-heart" aria-label="Sponsor @Ngx-Dummy on GitHub"> Sponsor Ngx-dummy </a>
			</footer>
		</aside>

		<div class="mdc-drawer-scrim"></div>
		<div class="mdc-drawer-app-content mdc-top-app-bar--fixed-adjust">
			<main class="main-content" id="main-content">
				<div class="swiper-container" style="overflow: hidden">
					<div class="swiper-wrapper" style="text-align: center">
						<div class="container-center swiper-slide">
							<div class="marvel-device ipad silver device-settings">
								<div class="camera"></div>
								<div class="screen">
									<app-root id="app1">
										<div class="container-transparent">
											<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
												<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
											</svg>
										</div>
									</app-root>
								</div>
								<div class="home"></div>
							</div>
						</div>
						<div class="container-center swiper-slide">
							<div class="marvel-device iphone-x">
								<div class="notch">
									<div class="camera"></div>
									<div class="speaker"></div>
								</div>
								<div class="top-bar"></div>
								<div class="sleep"></div>
								<div class="bottom-bar"></div>
								<div class="volume"></div>
								<div class="overflow">
									<div class="shadow shadow--tr"></div>
									<div class="shadow shadow--tl"></div>
									<div class="shadow shadow--br"></div>
									<div class="shadow shadow--bl"></div>
								</div>
								<div class="inner-shadow"></div>
								<div class="screen">
									<app-root2 id="app2">
										<div class="container-transparent">
											<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
												<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
											</svg>
										</div>
									</app-root2>
								</div>
							</div>
						</div>
						<div id="ngx-plugin-docs__container" class="container-center swiper-slide" style="height: 99vh">
							<embedded-docs></embedded-docs>
						</div>
					</div>
					<div class="swiper-button-prev"></div>
					<div class="swiper-button-next"></div>
				</div>
			</main>
			<footer class="footer">
				(C) Vladimir Ovsyukov -
				<a href="mailto:ovsyukov@yandex.com?subject=Accordion-Simple component">mail your ideas</a>
			</footer>
		</div>
		<script src="https://platform.twitter.com/widgets.js" charset="utf-8" async=""></script>
		<script src="https://buttons.github.io/buttons.js" async="" defer></script>
		<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
		<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
	<script src="runtime.de49577ab69544f8.js" type="module"></script><script src="polyfills.f1706d3c0a438c23.js" type="module"></script><script src="scripts.c9cda72e0d4a7934.js" defer></script><script src="vendor.838dfbb9fef08692.js" type="module"></script><script src="main.f920c18c5e739097.js" type="module"></script>

</body></html>